<template>
  <div class="header">
    <div class="navbar">
      <div
        :class="{ shadow: !nowCategory.categoryid }"
        @click="
          changeNav({
            categoryid: 0,
            parentid: 0,
            categoryname: '',
            level: 0,
          })
        "
      >
        首页
      </div>
      <div
        v-for="(item, index) in categoryOptions"
        :key="index"
        :class="{
          shadow:
            item.categoryid == nowCategory.categoryid ||
            item.categoryid == nowCategory.parentid,
        }"
        @click="changeNav(item)"
      >
        {{ item.categoryname }}
      </div>
    </div>
    <div class="childNav">
      <div class="welcome" v-if="!nowCategory.categoryid">
       <span v-if="userInfo.userid"> 用户{{ userInfo.username }}您好，今天是{{nowTime}}，欢迎回到易买网。</span>
      </div>
      <ul v-else class="children">
        <template v-for="item in categoryOptions">
          <template
            v-if="
              item.categoryid == nowCategory.categoryid ||
              item.categoryid == nowCategory.parentid
            "
          >
            <li
              v-for="item1 in item.children"
              :key="item1.categoryid"
              @click="changeNav(item1)"
            >
              {{ item1.categoryname }}
            </li>
          </template>
        </template>
      </ul>
    </div>
    <div class="position">您现在的位置：<span>易买网</span> &gt; 前台</div>
  </div>
  <el-container class="content">
    <!--侧边栏区域-->
    <el-aside width="180px" class="aside">
      <div class="box">
        <h2>商品分类</h2>
        <el-tree
          :data="categoryOptions"
          :props="defaultProps"
          @node-click="handleNodeClick"
          node-key="categoryid"
          :default-expanded-keys="[2, 3]"
        />
      </div>
      <div class="recently">
        <h2>最近浏览</h2>
        <div class="cont">
          <div
            v-for="item in recently"
            :key="item.goodsid"
            @click="showGoods(item)"
          >
            <img :src="item.goodsimg" />
            <div class="text">{{ item.goodsname }}</div>
          </div>
        </div>
      </div>
    </el-aside>
    <!--主区域-->
    <el-container style="overflow-x: hidden">
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
  <el-dialog
    append-to-body
    v-model="showGoodsVisible"
    title="查看商品"
    width="700"
    center
  >
    <div class="product">
      <h1>{{ showGoodsData.goodsname }}</h1>
    </div>
    <div class="infos">
      <div class="thumb">
        <el-image
          style="width: 300px; height: 300px"
          :src="showGoodsData.goodsimg"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="srcList"
          :initial-index="4"
          fit="cover"
        />
      </div>
      <div class="buy">
        <p>
          价格:<span class="price">￥{{ showGoodsData.goodsprice }}</span>
        </p>
        <p>
          库存:<span>{{ showGoodsData.goodsstock }}</span>
        </p>
        <p>
          状态:<span>{{
            showGoodsData.goodsstatus == 1 ? "上架" : "下架"
          }}</span>
        </p>
        <div class="button">
          <div
            class="goBuy"
            @click="saveCart(showGoodsData.goodsid, true)"
          ></div>
          <el-button
            type="primary"
            size="small"
            @click="saveCart(showGoodsData.goodsid)"
          >
            放入购物车
          </el-button>
        </div>
      </div>
    </div>
    <p class="contitle" style="margin-top: 10px">
      <span>商品详情</span>
    </p>
    <p style="padding: 10px">
      {{ showGoodsData.goodsdetails }}
    </p>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getAllCategory } from "@/api/category";
import { CODE } from "@/utils/StatusCode";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { addCart } from "@/api/cart";
import today from "@/utils/toDay";

const nowTime=today;
const store = useStore();
const router = useRouter();
const route = useRoute();

const recently = computed(() => {
  let list = JSON.parse(JSON.stringify(store.getters.getRecently));
  return list.reverse();
});
const nowCategory = computed(() => {
  return store.getters.getCategory;
});
const userInfo = computed(() => {
  return store.getters.getUserInfo;
});

onMounted(() => {
  getAllCategoryList();
});
// 首页导航
function changeNav(category: category) {
  store.dispatch("updateCategory", category);
  let path = "";
  if (category.categoryid) {
    path = "/foreGoods";
  } else {
    path = "/foreHome";
  }
  router.push({
    path: path,
  });
}
interface category {
  categoryid: number;
  parentid: number;
  categoryname: string;
  level: number;
  children?: category[];
}
const categoryOptions = ref<category[]>([]);
// 获取分类列表
async function getAllCategoryList() {
  const res = await getAllCategory({});
  if (res.code == CODE.OK) {
    categoryOptions.value = res.data;
  }
}
const defaultProps = {
  children: "children",
  label: "categoryname",
};
const handleNodeClick = (category: category) => {
  changeNav(category);
};
// 查看商品
const showGoodsVisible = ref(false);
let srcList: string[] = [""];
interface goods {
  goodsid: number;
  categoryid: number;
  goodsname: string;
  goodsimg: string;
  goodsprice: number;
  promotiontype: number;
  goodsstatus: number;
  goodsstock: number;
  goodsdetails: string;
}
let showGoodsData = reactive<goods>({
  goodsid: 0,
  categoryid: 0,
  goodsname: "",
  goodsimg: "",
  goodsprice: 0,
  promotiontype: 0,
  goodsstock: 0,
  goodsstatus: 0,
  goodsdetails: "",
});
function showGoods(goods: goods) {
  store.dispatch("updateRecently", goods);
  srcList[0] = goods.goodsimg;
  showGoodsData = goods;
  showGoodsVisible.value = true;
}
//放入购物车
async function saveCart(goodsid: number, isBuy?: boolean) {
  const userid = userInfo.value.userid;
  if (!userid) {
    ElMessage({
      message: "请先登录",
      type: "warning",
    });
    return;
  }
  const res = await addCart({
    userid: userid,
    goodsid: goodsid,
  });
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
      onClose: () => {
        if (!isBuy) return;
        router.push("/cart");
      },
    });
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
</script>

<style lang="less" scoped>
.navbar {
  height: 30px;
  margin-left: 100px;
  > div {
    cursor: pointer;
    float: left;
    width: 78px;
    height: 30px;
    background: url(../../assets/img/bg.png) right -30px no-repeat;
    margin-right: 10px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #105f4b;
    overflow: hidden;
  }
  .shadow {
    background-position: left top;
    color: #fff;
  }
}
.position {
  margin: 10px 0;
  span {
    color: blue;
    cursor: pointer;
  }
}
.content {
  height: calc(100% - 100px);
}
h2 {
  background: #fff0d9;
  font-size: 14px;
  color: #853200;
  padding: 2px 8px;
  height: 24px;
  line-height: 24px;
  margin: 0;
}
.aside {
  border: 1px solid #c3c3c3;
  overflow-x: hidden;
}
.box {
  height: calc(100% - 160px);
  overflow: auto;
  transform: translateX(4px);
  margin-bottom: 10px;
  dl {
    dt {
      color: #404040;
      font-weight: bold;
      background: #fafafa;
      padding: 2px 10px;
      height: 22px;
      line-height: 22px;
    }
    dd {
      height: 22px;
      line-height: 22px;
      margin: 5px auto;
      margin-left: 10px;
      background: url(../../assets/img/bg.png) -232px -81px no-repeat;
      padding-left: 25px;

      span {
        color: #666;
        display: block;
        cursor: pointer;
        width: 60px;
        &:hover {
          color: #4091ff;
        }
      }
    }
  }
  em {
    float: right;
    padding: 0 5px;
    font-style: normal;
    > span {
      text-align: right;
    }
  }
}
.recently {
  height: 150px;
  h2 {
    margin-bottom: 4px;
  }
  .cont {
    > div :first-child {
      margin-bottom: 4px;
    }
    > div {
      display: flex;
      cursor: pointer;
      img {
        width: 55px;
        height: 55px;
      }
      .text {
        color: #606266;
        height: 45px;
        padding: 5px;
        line-height: 20px;
      }
    }
  }
}
:deep(.el-main) {
  padding: 0;
  overflow: hidden;
}
.contitle {
  font-size: 14px;
  line-height: 30px;
  background: url(../../assets/img/bg.png) -230px -100px no-repeat;
  border-bottom: 2px solid #fbaa62;
  padding-left: 25px;
  font-weight: bold;
}
:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #409eff !important;
}
.main {
  overflow: auto;
  transform: translateX(4px);
}
.childNav {
  height: 30px;
  background: #fc7e31;
  .welcome {
    text-align: right;
    color: #ffc;
    line-height: 30px;
  }
}
.wqeqwe {
  width: 100px;
  height: 100px;
  background-color: red;
}
.children {
  padding: 9px;
  line-height: 14px;
  > li:first-child {
    border-left: 0;
  }

  li {
    float: left;
    display: inline;
    border-right: 1px solid #dc6b04;
    border-left: 1px solid #fba455;
    padding: 0 9px;
    color: #fff;
    cursor: pointer;
    &:hover {
      color: #4091ff;
    }
  }
}
.product {
  border-bottom: 1px dashed #cfcfcf;
  h1 {
    font-size: 18px;
  }
}
.infos {
  margin-top: 10px;
  display: flex;
  .thumb {
    width: 300px;
  }
  .buy {
    width: 440px;
    line-height: 40px;
    padding-left: 10px;
    span {
      padding-left: 4px;
    }
    .price {
      color: #c00;
      font-weight: bold;
      font-size: 24px;
    }
    .button {
      border: 1px solid #ffefd2;
      padding: 10px;
      background: #fff8e7;
      margin: 20px auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      .goBuy {
        border: 0;
        margin: 0 10px;
        background: url(../../assets/img/bg.png) left -176px;
        height: 35px;
        width: 144px;
        cursor: pointer;
      }
    }
  }
}
</style>
